<template>
  <div class="wrapper">
    <el-row :gutter="20">
      <el-col :span="7"><div class="grid-content bg-purple" /></el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <div class="progress">
            <el-steps :align-center="true" :space="300">
              <el-step title="填写商品信息" class="first" />
              <el-step title="填写商品属性" />
            </el-steps>
          </div>

          <!-- 表单部分 -->
          <div class="content">
            <el-form :model="form" label-width="120px">
              <el-form-item label="商品分类:" :required="true">
                <el-select
                  v-model="form.kind"
                  placeholder="全部"
                  style="width: 200px"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>

              <el-form-item label="商品名称:" :required="true">
                <el-input
                  v-model="form.name"
                  placeholder="请输入"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="商品品牌:" :required="true">
                <el-select
                  v-model="form.brand"
                  placeholder="请输入品牌"
                  style="width: 150px"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>

              <el-form-item label="商品介绍:">
                <el-input
                  v-model="form.jieshao"
                  type="textarea"
                  style="width: 400px"
                  placeholder="请输入内容"
                />
              </el-form-item>

              <el-form-item label="商品货号:">
                <el-input
                  v-model="form.num"
                  placeholder="请输入"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="商品售价:" :required="true">
                <el-input
                  v-model="form.price"
                  placeholder="0"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="市场价:">
                <el-input
                  v-model="form.market"
                  placeholder="0"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="商品库存：">
                <el-input
                  v-model="form.stock"
                  placeholder="0"
                  style="width: 400px"
                />
              </el-form-item>

              <el-form-item label="计量单位：">
                <el-select
                  v-model="form.unit"
                  placeholder="请选择"
                  style="width: 150px"
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>

              <el-form-item label="商品重量:" :required="true">
                <el-input
                  v-model="form.kg"
                  placeholder="0"
                  style="width: 360px"
                />
                <span>克</span>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmit">下一步</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="7"><div class="grid-content bg-purple" /></el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const form = reactive({
  kind: "",
  name: "",
  brand: "",
  jieshao: "",
  num: "",
  price: "",
  market: "",
  stock: "",
  unit: "",
  kg: "",
});

const onSubmit = () => {
  router.push("/home/add2");
};
</script>

<style lang="less" scoped>
.progress {
  margin-bottom: 20px;
  .first {
    :deep(.el-step__icon) {
      background: #fcc284;
    }
  }
}
.wrapper {
  background: #ffffff;
  :deep(.el-form-item__label) {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }
  .el-button {
    width: 130px;
    height: 38px;
    background: #fcc284;
    border: 0;
    font-size: 18px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
    margin-left: 100px;
  }
}
</style>
